<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript" src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./asserts/css/register.css">
    <script type="text/javascript">
        $(function () {
            $("#button_id").click(function () {
                //实例化表单对象
                var formData = new FormData();
                formData.append("action","register")
                formData.append("username",$("#username").val());
                formData.append("password",$("#password").val());
                formData.append("addrs",$("#addrs").val());
                //获取单选框选中的标签 value 值
                formData.append("sex",$("input[name='sex']:checked").val())

/*
                //确定有值能请求到服务器
                console.log($("#username").val());
                console.log($("#password").val());
                console.log($("#addrs").val());
                console.log($("input[name='sex']:checked").val());*/

                //复选框
                var hobbies = [];
                $("input[name='hobbies']:checked").each(function (index) {
                    hobbies[index] = $(this).val();
                })
                //确定有值能请求到服务器
                // console.log(hobbies);

                formData.append("hobbies", hobbies);
                //图片
                formData.append("file", $("#fileContent")[0].files[0])

                //通过ajax发送数据到服务器
                $.ajax({
                    url: "http://localhost:8080/TheMall/UserServlet",
                    async: true,
                    headers: {action: "register"},
                    data: formData,
                    type: "post",
                    dateType: "json",
                    //告诉jQuery 不要去处理 formData
                    processData: false,
                    //指定为 false 才是正确的 Content-Type
                    contentType: false,
                    success: function (respData) {
                        debugger
                        // alert("1");
                        if (respData.respType == 'success') {//注册成功
                            //弹出2对话框跳转主页
                            alert("注册成功");
                            location.href="login.html";
                        }else if(respData.respType == 'error'){//注册失败
                            alert("注册失败");
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<form>
    <table border="1" cellspacing="0" cellpadding="10" id="form_id">
        <tr>
            <td>头像:</td>
            <td><input type="file" id="fileContent"></td>
        </tr>
    </table>
    <!--        头像:<input type="file" id="fileContent"><br/>-->
    用户名:<input type="text" id="username" placeholder="请输入用户名"><br/>
    密码:<input type="password" id="password" placeholder="请输入密码"><br/>
    性别:<input type="radio" name="sex" value="man">男
    <input type="radio" name="sex" value="women">女<br/>
    爱好:<input type="checkbox" name="hobbies" value="sing">唱
    <input type="checkbox" name="hobbies" value="jump">跳
    <input type="checkbox" name="hobbies" value="rap">rap<br/>
    地址：<select id="addrs">
    <option value="guangdong">广东</option>
    <option value="guangxi">广西</option>
    <option value="hunan">湖南</option>
    <option value="jiangxi">江西</option>
</select><br/>
    日期：<input type="date"/><br>
    邮箱：<input type="email"/><br>

    <input type="button" value="注册" id="button_id">
    <input type="reset" value="重置"/>
</form>
</body>
</html>